<template>
<div>
<!--  添加收件   -->


  <!--  分割线  -->
<!--  <el-divider class="head"></el-divider>-->
  <!-- // 用于限制宽度 -->
  <div class="div-main">
    <el-row>
      <el-col :span="1.5">
        <div>
          <el-divider class="heads"  direction="vertical"></el-divider>
          <b>基本资料:</b>  </div>
      </el-col>
    </el-row>
    <!--  分割线  -->
    <el-divider class="head"></el-divider>
    <!--  添加表单  -->
    <el-form  size="medium" :model="addAdmExpressageForm" label-width="1px" :status-icon=true  label-position="top" >

      <el-row>
        <el-col :span="11">
          <el-form-item  label="收件人:"  :required='true'>
            <el-input  placeholder="收件人" v-model="addAdmExpressageForm.systemUserRecipients" ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="11" :push="2">
          <el-form-item  label="收件日期:" :required='true'>
            <el-date-picker
                v-model="addAdmExpressageForm.expressageDateofreceipt"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="11">
          <el-form-item  label="快递公司:" :required='true'>
            <el-input  v-show="1==2" v-model="addAdmExpressageForm.expressageSendWaayId" ></el-input>
            <el-input  placeholder="单位名称" v-model="addAdmExpressageForm.sendName" ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="11" :push="2">
          <el-form-item  label="快件类型:" :required='true'>
            <el-input v-show="1==2" v-model="addAdmExpressageForm.expressageExpressTypeId"></el-input>
            <el-input placeholder="快件类型" v-model="addAdmExpressageForm.expressName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="11">
          <el-form-item label="领取状态:"  >
            <el-select v-model="addAdmExpressageForm.takestatus" clearable placeholder="选择领用状态">
              <el-option label="未领用" value='1'></el-option>
              <el-option label="已领用" value='2'></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!------------------------------------- 选填 ----------------------------------------------------->
      <el-row>
        <el-col :span="1.5">
          <div>
            <el-divider class="heads"  direction="vertical"></el-divider>
            <b>其他选填</b>  </div>
        </el-col>
        <el-col :span="2"  :push="2">
          <el-button type="primary" plain size="mini" round @click="shouqi">{{shouqiBtnText}}</el-button>
        </el-col>
      </el-row>
      <!--  分割线  -->
      <el-divider class="head"></el-divider>
      <transition name="slide-fade">
        <div v-show="qiteStatus">
          <el-row>
            <el-col :span="11">
              <el-form-item  label="案件:"  >
                <el-input  placeholder="案件" v-model="addAdmExpressageForm.caseNo"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="11" :push="2">
              <el-form-item  label="快递单号:" >
                <el-input placeholder="快递单号" v-model="addAdmExpressageForm.expressageCourierNumber"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="11">
              <el-form-item  label="快递费:" prop="contactTel" >
                <el-input  placeholder="快递费" v-model="addAdmExpressageForm.expressFee"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="11" :push="2">
              <el-form-item  label="领件人:" prop="contactEmail" >
                <el-input placeholder="领件人" v-model="addAdmExpressageForm.collarPerson"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="11">
              <el-form-item  label="相关文件:" prop="contactTel" >
                <el-input  placeholder="相关文件" v-model="addAdmExpressageForm.expressageFile"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="11" :push="2">
              <el-form-item  label="领件时间:" prop="contactEmail" >
                <el-date-picker
                    v-model="addAdmExpressageForm.expressageBringDate"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col>
              <el-form-item  label="领件说明:">
                <el-input placeholder="领件说明" v-model="addAdmExpressageForm.expressageCollarnote"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col>
              <el-form-item  label="其他备注说明:">
                <el-input type="textarea"  placeholder="备注说明" v-model="addAdmExpressageForm.expressageRemark"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

        </div>
      </transition>


      <el-row>
        <el-col :span="5">
          <el-form-item>
            <el-button size="medium" type="primary" plain @click="saveOrUpdate" >确定提交</el-button>
          </el-form-item>
        </el-col>

        <el-col :span="5">
          <el-form-item>
            <el-button size="medium" type="primary" plain @click="goBack" >返回</el-button>
          </el-form-item>
        </el-col>

      </el-row>


    </el-form>
<!--    <el-button size="medium" type="primary" plain @click="saveOrUpdate" >确定提交</el-button>-->

  </div>

  <!--  收件人对话框  -->
  <el-dialog
      title="收件人"
      :visible.sync="shoujianrenDialog"
      width="50%">

    <el-form :inline="true" :model="hrEmpForm" class="demo-form-inline">
      <el-form-item >
        <el-input v-model="hrEmpForm.empName" placeholder="请输入姓名"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="queryHrEmp">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
        :data="hrEmpData"
        style="width: 100%">
      <el-table-column
          prop="empName"
          label="姓名">
      </el-table-column>

      <el-table-column
          prop="userPhone"
          label="手机号">
      </el-table-column>


      <el-table-column
          prop="empPosition"
          label="权限组">
      </el-table-column>


    </el-table>

    <!--  分页  -->
<!--    <el-pagination-->
<!--        @size-change="hrEmpChange"-->
<!--        @current-change="hrEmpChange"-->
<!--        :page-sizes="[2, 4, 6, 8]"-->
<!--        layout="total, sizes, prev, pager, next, jumper"-->
<!--        :total="pageData.total">-->
<!--    </el-pagination>-->


  </el-dialog>

  <!-- 案件对话框  -->
  <el-dialog
      title="收件人"
      :visible.sync="shoujianrenDialog"
      width="50%">


  </el-dialog>

  <!--  领件人对话框  -->
  <el-dialog
      title="收件人"
      :visible.sync="lingjianrenDialog"
      width="50%">


  </el-dialog>

  <!-- 快件类型对话框 -->
  <el-dialog
      title="快件类型"
      :visible.sync="kuaijianleixingDialog"
      width="50%">


  </el-dialog>

  <!-- 快递公司对话框 -->
  <el-dialog
      title="快递公司"
      :visible.sync="kuaidigongsiDialog"
      width="50%">


  </el-dialog>



</div>
</template>

<script>
export default {
  name: "addAdmExpressageSJ",
  data(){
    return{

      hrEmpData:[], // 收件人零件人数据
      hrEmpForm:{}, // 收件人零件人表单
      shoujianrenDialog:false,  // 收件人对话框
      lingjianrenDialog:false, // 领件人对话框
      kuaijianleixingDialog:false, // 快件类型对话框
      kuaidigongsiDialog:false,  // 快递公司对话框
      pageData:{}, // 分页数据
      shouqiBtnText:"收起",//收起按钮显示
      qiteStatus:true,//控制其他选填显示
      addAdmExpressageForm:{
        id:this.$route.params.id,
      }, // 表单数据


    }
  },
  created() {
    this.init();
  },
  methods: {
    goBack(){this.$router.go(-1)},
    init() {
      //判断路由是否有路由参数
      if (this.$route.params && this.$route.params.id) {
        this.selectByid(this.$route.params.id);
      }
    },

    saveOrUpdate() {
      if (this.addAdmExpressageForm.id) {//如果有id 调用修改
        this.updateByid();
      } else {  //否则调用添加
        this.addAdmContactsFun();
      }
    },
    shouqi() {//收起按钮
      this.qiteStatus = !this.qiteStatus//修改显示状态
      if (this.qiteStatus == true) {
        this.shouqiBtnText = "收起"
      } else {
        this.shouqiBtnText = "展开"
      }
    },
    selectByid(id){ //如果为修改 查询默认值

      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      this.$http.get(`admExpressage/${id}`)
      .then(res => {
        setTimeout(() => {
          loading.close();
        });
        this.addAdmExpressageForm = res.data.data
      })
      .catch()

    },
    queryHrEmp(){ // 收件人领件人查询

    },

  }
}
</script>

<style scoped>

.head{
  margin-top: 10px ;
  margin-bottom: 15px ;
  height: 2px;
}

.heads{
  width: 3px;
  background-color: #409EFF;
  height: 19px;
}

.div-main{
  width: 70%;
  text-align: left;
}


/* 显示/隐藏  过渡动画  */
.slide-fade-enter-active {transition: all .2s ease;}
.slide-fade-leave-active {transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);}
.slide-fade-enter, .slide-fade-leave-to{transform: translateX(5px);opacity: 0;}


</style>